<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
	<title>content</title>
	<link rel="stylesheet" type="text/css" href="./Public/Home/css/content.css" />
			{{include file="VIEW_PATH/Common/header.php"}}
			<!--列表开始-->
			<!--内容开始-->
			<div id="list-content-wrap">
				<div class="list-content-inner">
					<div class="path-box">
						<a href="">功能箱包</a>&nbsp;&nbsp;<i>&gt;</i>&nbsp;&nbsp;<a href="">皮具箱包</a>&nbsp;&nbsp;<i>&gt;</i>&nbsp;&nbsp;<span>瑞士包</span>
					</div>
					<div class="list-content-title">
						<div class="proinfo-left">
							<div class="proinfo-left-top">
								
								<!--放大镜效果开始-->
								<script type="text/javascript">
									$(function(){
										$("#f-left").bind("mousemove", function(e) {
											// 兼容的事件对象
    										var ev = window.event || e;
											
											
											
											// 获取鼠标的坐标点
									        var x = ev.layerX || ev.offsetX;
									        var y = ev.layerY || ev.offsetY;
											
											
//											document.title = x + "|" + y;
//											显示
											$(".kuai").css({display:"block"});
											$(".f-right").css({display:"block"});
											
											// 计算出小色块的位置
									        var left = x-100;
									        var top = y - 100;
									        // 小色块的范围
									        if(left>=180){left = 180;}
									        if(left<=0){left = 0;}
									        if(top>=180){top = 180;}
									        if(top<=0){top = 0;}
											
											// 给小色块赋值
											$(".kuai").css({left:left + "px"});
											$(".kuai").css({top:top + "px"});
											
//											大图位置
											$(".tu").css({left:left*-2 + "px"});
											$(".tu").css({top:top*-2 + "px"});
											
											
										});
										
//										移出鼠标块和右侧消失
										$("#f-left").mouseout(function(){
											$(".kuai").css({display:"none"});
											$(".f-right").css({display:"none"});
										})
										
									})
								</script>
								
								
								
								<!--放大镜效果结束-->
								
								
								<!--获取大图，中图完整路径-->
								<?php
									$dirN = "Upload/Content/16/07/pro-z/";
									$mediumArr1 = $dirN.$mediumArr[0];
									$bigArr1 = $dirN.$bigArr[0];
									
									?>
								<div class="proinfo-left-top-main">
									<div id="f-left">
										<img id="medium_img" src="{{$mediumArr1}}" alt="" />
										{{foreach from="$mediumArr" key="$km" value="$vm"}}
										<input type="hidden" name="mediumArr" class="mediumArr" value="{{$vm}}" />
										{{endforeach}}
										{{foreach from="$bigArr" key="$kb" value="$vb"}}
										<input type="hidden" name="bigArr" class="bigArr" value="{{$vb}}" />
										{{endforeach}}
										<div class="kuai"></div>
										<div class="cover"></div>
										<div class="f-right">
											<img  id="big_img" class="tu" src="{{$bigArr1}}"/>
										</div>
									</div>
									<!--<img src="./Public/Home/img/content/fdj.jpg" width="360" alt="" />-->
								</div>
								<!--点击动态改变五张展示图-->
								<script type="text/javascript">
									$(function(){
										$('.proinfo-left-top-list-img a').mouseover(function(){
											var num = $(this).index();
											var small = $(this).find('img').attr('src');
											var dirN = "Upload/Content/16/07/pro-z/";
//											重组字符串，然后拼接中大图路径
//											中图
											var mediumStr = dirN + $('.mediumArr').eq(num).attr('value');
											var bigStr = dirN + $('.bigArr').eq(num).attr('value');
//											将组合的路径赋值到相应的标签里
											$('#medium_img').attr('src',mediumStr);
											$('#big_img').attr('src',bigStr);
											
											
											
											
											
											
											


										})	
									})
								</script>
								<div class="proinfo-left-top-list">
									<div class="proinfo-left-top-list-img">
										{{foreach from="$smallArr" key="$ks" value="$vs"}}
										<a href="javascript:;"><img width="60" src="{{$vs}}" alt="" /></a>
										{{endforeach}}
									</div>
								</div>
							</div>
							<div class="proinfo-left-bottom">
								<label for="">商品编码：</label>
								<em>{{$goodsData['gnumber']}}</em>
								&nbsp;&nbsp;
								<a href="">分享</a>
								<a href="">收藏</a>
							</div>
						</div>
						<div id="proinfo-left">
							<div class="proinfo-title">
								<h1>{{$goodsData['gname']}}</h1>
								<p></p>
							</div>
							<div class="proinfo-focus">
								<dl>
									<dt>易购价</dt>
									<dd>
										<del><i>￥</i>{{$goodsData['marketprice']}}.00</del>
									</dd>
								</dl>
								<div class="price-promo">
									<span>促销价</span>
									<span class="da-price"><i>￥</i> {{$goodsData['shopprice']}}<i>.00</i></span>
								</div>
								<div class="price-pingjia">
									<p><span>累计评价</span></p>
									<p><span>近期销量</span><span>2266</span></p>
								</div>
								<div class="price-position">
									<dl>
										<dt><span>送&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;至</span></dt>
										<dd>
											<a href="">四川 成都 镜面区</a>
											<span>现货</span>
										</dd>
									</dl>
								</div>
								
								<script type="text/javascript">
									$(function(){
										$(".change-tianjian a").click(function(){
											$(this).addClass('ch-yangshi').siblings().removeClass();
										});	
									})
								</script>
								<div id="kuang">
									{{foreach from="$guigeData" key="$k" value="$v"}}
									<div key={{$k}} class="price-position">
										<dl>
											<dt><span>{{$v['taname']}}</span></dt>
											<dd class="change-tianjian">
												{{foreach from="$v['sonData']" key="$kk" value="$vv"}}
												<!--class="ch-yangshi"--> 
												<a {{if value="$kk == 0"}}  class="ch-yangshi" {{endif}} href="javascript:;" zhi="{{$vv['gtid']}}">{{$vv['gtvalue']}}</a>
												{{endforeach}}
											</dd>
										</dl>
									</div>
									{{endforeach}}
								</div>
								<input type="hidden" name="gid" id="gid" value="{{$gid}}" />
	<!--通过ajax发送后台数据，动态改变库存和价格-->
	<script type="text/javascript">
		$(function(){
			$(".change-tianjian a").click(function(){
//				var likeA = $(this).attr('zhi');
				var gid = $('#gid').attr('value');
				var numA = $(this).parents('#kuang').find('.price-position:last').attr('key');
				var num = "";
				for(var i=0; i<=numA; i++){
					num += $(this).parents('#kuang').find('.ch-yangshi').eq(i).attr('zhi')+",";
				}
//				alert(num);
//				将num值传入一个隐藏域里面，以便购物车调用数据
				var yincang = '<input type="hidden" name="numData" id="numData" value="'+num+'" />';
				$('#kucunData').html(yincang);
				$.ajax({
					type:"post",
					url:"{{U('getPrice')}}",
					data:{num:num,gid:gid},
					datatype:'json',
					traditional: true, 
					success:function(phpData){
//						alert(phpData.inventory); return;
//						将返回的数据添加到库存量里面
						if(phpData.inventory == null){
							$('#kucunliang').text("0");
							$('.btn-bynow').attr('href','javascript:;');
							$('.btn-bynow').css({background:"#ccc"});
						}else{
							$('#kucunliang').text(phpData.inventory);
							$('.btn-bynow').attr('href','');
							$('.btn-bynow').css({background:"#5D3E00"});
						}
					}
				});
			});	
		})
	</script>
	
								<script type="text/javascript">
									$(function(){
										$(".jian").click(function(){
											var pro = parseInt($('.pro-num').attr("value"));
											if(pro <= 1){return;}
//											alert(pro);
											var new_pro = pro - 1;
											pro = $('.pro-num').attr("value",new_pro);
										})
										$(".jia").click(function(){
											var pro = parseInt($('.pro-num').attr("value"));
//											alert(pro);
											var new_pro = pro + 1;
											pro = $('.pro-num').attr("value",new_pro);
										})
									})
								</script>
								<div class="price-num">
									<dl>
										<dt><span>购买数量</span></dt>
										<dd>
											<a class="jian" href="javascript:;">-</a>
											<input class="pro-num" type="text" name="" id="" value="1" />
											<a class="jia" class="black" href="javascript:;">+</a>
										</dd>
										<dd><div id="kucunData"></div><span>库存：</span><span id="kucunliang">0</span></dd>
									</dl>
								</div>
								<div class="main-btns">
									<a class="btn-bynow" href="">立即购买</a>
									<a class="btn-addcart" href="javascript:;">加入购物车</a>
								</div>
								<!--购物车ajax事件-->
								<script type="text/javascript">
									$(function(){
										$('.btn-addcart').live('click',function(){
//											组合属性获取
											var combine = $('#numData').attr('value');
//											获取库存量
//											alert(combine); return;
											var kucunliang = $('#kucunliang').text();
//											获取商品id
											var gid = $('#gid').attr('value');
//											获取购买数量
											var num = $('.pro-num').attr('value');
//											alert(num);

											if(!combine){
												alert('请选择样式');
												return;
											}else{
												if(kucunliang == 0){
													alert('该商品已经没有库存了，亲');
													return;
													
												}
											}
											
//											ajax传给购物车控制器添加方法
											$.ajax({
												type:"post",
												url:"{{U('ShopCar/add')}}",
												data:{gid:gid,combine:combine,kucunliang:kucunliang,num:num},
												dataType:"Json",
												success:function(phpData){
													if(phpData == 1){
												$('#fixed_shop').css({display:"block"});
													}
												}
												
												
												
											});
											
											
											
											
										})
									})
								</script>
								
								
								
								<div class="pro-serv-panel">
									<dl>
										<dt>特色服务</dt>
										<dd>
											<span>政企采购</span>
											<span>政企采购</span>
											<span>政企采购</span>
											<span>政企采购</span>
											<span>政企采购</span>
										</dd>
									</dl>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div id="content-content">
					<div id="content-left">
						<div class="area-head">
							<h3>猜你喜欢</h3>
						</div>
						<ul>
							<li>
								<p class="like-img"><a href=""><img src="./Public/Home/img/content/0070101199-000000000131994594_1_120x120.jpg"/></a></p>
								<p class="like-des">【双坛礼盒装】宝丰54°百年荣耀献礼版坛酒1000ml*2坛 国产清香型馈赠礼酒</p>
								<p class="price"><span>￥199.00</span></p>
							</li>
						</ul>
						<ul>
							<li>
								<p class="like-img"><a href=""><img src="./Public/Home/img/content/0070101199-000000000131994594_1_120x120.jpg"/></a></p>
								<p class="like-des">【双坛礼盒装】宝丰54°百年荣耀献礼版坛酒1000ml*2坛 国产清香型馈赠礼酒</p>
								<p class="price"><span>￥199.00</span></p>
							</li>
						</ul>
						<ul>
							<li>
								<p class="like-img"><a href=""><img src="./Public/Home/img/content/0070101199-000000000131994594_1_120x120.jpg"/></a></p>
								<p class="like-des">【双坛礼盒装】宝丰54°百年荣耀献礼版坛酒1000ml*2坛 国产清香型馈赠礼酒</p>
								<p class="price"><span>￥199.00</span></p>
							</li>
						</ul>
					</div>
					
					<script type="text/javascript">
						$(function(){
							$("#pro-allthing li").click(function(){
								var num = $(this).index();
								$(this).addClass("juse").siblings().removeClass();
								$(".content-main1").eq(num).css({display:"block"}).siblings().css({display:"none"});
								
								
//								获取定位子元素的高,然后赋值给父级
							var son_height = $(".content-main1").eq(num).css("height");
							$("#content-main").css({height:son_height});
							})
							
							
//							获取定位子元素的高,然后赋值给父级
							var son_height = $(".content-mian-xiangqing").css("height");
							$("#content-main").css({height:son_height});
						})
					</script>
					
					<!--中间详情页开始-->
					<div id="content-xiangqing">
						<div class="content-title">
							<ul id="pro-allthing">
								<li class="juse"><a href="javascript:;">商品详情</a></li>
								<li><a href="javascript:;">评价</a></li>
								<li><a href="javascript:;">商品详情</a></li>
								<li><a href="javascript:;">商品详情</a></li>
								<li><a href="javascript:;">商品详情</a></li>
							</ul>
						</div>
						<div id="content-main">
							<div class="content-main1 content-mian-xiangqing">
								<div class="pro-canshu">
									<div class="pro-canshu-title">
										<span class="fl">核心参数</span> 
										<span class="fr"><a href="">更多参数</a></span>

									</div>
									<div class="pro-canshu-content">
										<ul>
											<li><span>国产/进口：国产</span></li>
											<li><span>国产/进口：国产</span></li>
											<li><span>国产/进口：国产</span></li>
											<li><span>国产/进口：国产</span></li>
											<li><span>国产/进口：国产</span></li>
											<li><span>国产/进口：国产</span></li>
											<li><span>国产/进口：国产</span></li>
										</ul>
									</div>
								</div>
								<div class="content-img">
									{{$goodsData['intro']}}
									<!--<img src="./Public/Home/img/content/142038893090168069719570_x.jpg"/>
									<img src="./Public/Home/img/content/154151017293401155843370_x.jpg"/>
									<img src="./Public/Home/img/content/154151017293401155843370_x.jpg"/>
									<img src="./Public/Home/img/content/154151017293401155843370_x.jpg"/>
									<img src="./Public/Home/img/content/154151017293401155843370_x.jpg"/>
									<img src="./Public/Home/img/content/154151017293401155843370_x.jpg"/>
									<img src="./Public/Home/img/content/154151017293401155843370_x.jpg"/>
									<img src="./Public/Home/img/content/154151017293401155843370_x.jpg"/>
									<img src="./Public/Home/img/content/154151017293401155843370_x.jpg"/>
									<img src="./Public/Home/img/content/154151017293401155843370_x.jpg"/>
									<img src="./Public/Home/img/content/154151017293401155843370_x.jpg"/>
									<img src="./Public/Home/img/content/154151017293401155843370_x.jpg"/>
									<img src="./Public/Home/img/content/196791700463325797169190_x.jpg" alt="" />-->
								</div>
							</div>
							
							<!--评价-->
							<div class="content-main1 to-speack">
								<!-- 多说评论框 start -->
								<div class="ds-thread" data-thread-key="{{$goodsData['gid']}}" data-title="{{$goodsData['gname']}}" data-url="{{U('Content/index',array('gid'=>$goodsData['gid']))}}"></div>
							<!-- 多说评论框 end -->
							<!-- 多说公共JS代码 start (一个网页只需插入一次) -->
							<script type="text/javascript">
							var duoshuoQuery = {short_name:"liyaogangfather"};
								(function() {
									var ds = document.createElement('script');
									ds.type = 'text/javascript';ds.async = true;
									ds.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//static.duoshuo.com/embed.js';
									ds.charset = 'UTF-8';
									(document.getElementsByTagName('head')[0] 
									 || document.getElementsByTagName('body')[0]).appendChild(ds);
								})();
								</script>
							<!-- 多说公共JS代码 end -->
							</div>
							
							<!--评价结束-->
						</div>
						
					</div>
					
				</div>
			</div>
			<!--内容结束-->
			
			<!--写个固定框，当添加购物车成功时调用-->
			<div id="fixed_shop">
				<p>添加购物车成功！</p>
				<p><a id="go_shopCar" href="javascript:;">现在付款</a><a id="continueShop" href="javascript:;">继续购物</a></p>
			</div>
			<!--购物车jquery-->
			<script type="text/javascript">
				$(function(){
					$('#go_shopCar').click(function(){
						location.href = "{{U('ShopCar/index')}}";
					})
					
					$('#continueShop').click(function(){
						$('#fixed_shop').css({display:"none"});
					})
				})
			</script>
			
			<!--列表结束-->
			
			
			{{include file="VIEW_PATH/Common/footer.php"}}
</body>
</html>